<!--  -->
<template>
  <div class="ly-footer">
    <div class="ly-foot">
      <div class="ly-content">
        <div class="ly-logo">
          <img src="@/assets/img/foot_logo.png">
          <p>一站式企业服务平台</p>
        </div>
        <ul class="ly-list" :class="isMobile?'ly-lr':''">
          <!-- <h4>我们的业务</h4>
          <li class="ly-a" v-for="(item,index) in service" :key="index"  @click="$router.push({path:'/project',query:{type:item.id}})">{{item.typeName}}</li> -->
        </ul>
        <ul class="ly-list">
          <!-- <h4 @click="$router.push('/news')" class="busi_nesw">新闻资讯</h4> -->
          <!-- <h4 @click="$router.push('/business')" class="busi_nesw">商学院</h4> -->
        </ul>
        <ul class="ly-list">
          <h4>联系我们</h4>
          <li>总部：福建省福州市鼓楼区东街街道东街33号武夷中心16层</li>
          <li>厦门分部：厦门市湖里区厦门保税市场大厦9A</li>
          <li>泉州分部：泉州市丰泽区宝洲街721号浦西万达中心A座41层</li>
          <li>三明分部：三明市梅列区东乾路188号工商联大厦27层</li>
          
          <li>联系电话：{{dataInfo.companyFax}}</li>
          <li>QQ：{{dataInfo.number}}</li>
          <li>邮箱：{{dataInfo.companyEmail}}</li>
        </ul>
        <ul class="ly-list">
          <h4>关注我们</h4>
          <div class="ly-weChat">
            <p>微信小程序</p>
            <img :src="dataInfo.miniPic"/>
          </div>
          <div class="ly-weChat weixinChart">
            <p>微信公众号</p>
            <img :src="dataInfo.wechatPic"/>
          </div>
        </ul>
      </div>
    </div>
    <div class="ly-down" v-if="isMobile">
      <p>页面版权所有福建企瑞宝科技服务有限公司  <br/> All Rights Reserved<br/> 闽ICP备20010577号</p>
    </div>
    <div class="ly-down" v-else>
      <p>页面版权所有福建企瑞宝科技服务有限公司  &nbsp;&nbsp;|&nbsp;&nbsp; All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.beian.miit.gov.cn/">闽ICP备20010577号</a> </p>
    </div>
  </div>
</template>
<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import {clieentWidth} from "@/utils/clientwidth"
  import {mapGetters} from 'vuex'

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        isMobile: false,  // 是否为小屏
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapGetters(['service','dataInfo'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.isMobile = clieentWidth()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style lang='scss' scoped>
  $wid: 6.25;
  .ly-footer {
    .ly-foot {
      width: 100%;
      background: #282828e7;
      padding: 50px 0 30px;
      font-size: 0;

      .ly-logo {
        display: inline-block;
        vertical-align: top;

        img {
          width: 140px;
        }

        p {
          line-height: 30px;
          font-size: 14px;
          text-align: center;
          color: white;
        }
      }

      .ly-list {
        display: inline-block;
        vertical-align: top;
        padding: 0 0 0 5%;
        text-align: left;

        h4 {
          font-size: .16rem;
          color: #fff;
          line-height: 40px;
        }

        li {
          line-height: 30px;
          color: white;
          font-size: .14rem;
        }

        .ly-a {
          cursor: pointer;
          &:hover {
            color: #0767f2;
          }
        }

        p {
          line-height: 30px;
          font-size: 14px;
          color: #999;
        }

        .ly-weChat {
          display: inline-block;
          vertical-align: top;
          margin-left: 0;
          
          img {
            width: 110px;
          }
        }
      }
    }

    .ly-down {
      background: #282828;
      line-height: 50px;

      p {
        text-align: center;
        color: white;
        font-size: 14px;
      }
    }
  }
.weixinChart{
  margin-left: 0.4rem !important;
}
  @media screen and (max-width: 1400px) {
    .ly-footer {
      .ly-foot {
        .ly-list {
          h4 {
            font-size: .18rem/$wid;
          }

          li {
            font-size: .16rem/$wid;
          }
        }
      }
    }
  }

  @media screen and (max-width: 580px) {
    .ly-footer {
      .ly-content {
        width: 100%;
      }

      .ly-foot {
        padding: 2rem/$wid .7rem/$wid;

        .ly-list {
          padding: 0;

          &.ly-lr {
            padding: 0 1rem/$wid;
          }

          h4 {
            font-size: 1rem/$wid;
          }

          li {
            font-size: .8rem/$wid;
          }
        }
      }

      .ly-down {
        padding: .5rem/$wid 0;

        p {
          line-height: 1.5rem/$wid;
          font-size: .8rem/$wid;
        }
      }
    }

  }
.busi_nesw{
  cursor: pointer;
}

</style>
